<template>
  <view v-if="productList.length === 3" class="three-images">
    <image :src="productList?.[0]?.pic" class="three-images__big" />
    <view class="three-images__small">
      <image
        v-for="product in productList.slice(1)"
        :key="product.id"
        class="three-images__small--img"
        :src="product.pic"
        @click="jumpGoods(shopId, product.id)"
      />
    </view>
  </view>
  <view v-else class="other-images">
    <image
      v-for="(product, index) in productList"
      :key="product.id"
      :src="product.pic"
      :style="computedStyle"
      :class="computedClasses(index)"
      @click="jumpGoods(shopId, product.id)"
    />
  </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import type { PropType } from 'vue'
import type { ProductItem } from '../types'
import { jumpGoods } from '@/utils/navigateToShopInfo'

const $props = defineProps({
  productList: {
    type: Array as PropType<ProductItem[]>,
    default: () => [],
  },
  shopId: {
    type: String as PropType<Long>,
    required: true,
  },
})
const computedClasses = computed(() => (index: number) => {
  const classStacks: string[] = []
  if ($props.productList.length > 1) {
    classStacks.push('margin')
  }
  if ($props.productList.length === 2 && index === 1) {
    classStacks.push('no-mr')
    classStacks.push('no-mb')
  } else if ($props.productList.length === 4) {
    if ([1, 3].includes(index)) {
      classStacks.push('no-mr')
    }
    if ([2, 3].includes(index)) {
      classStacks.push('no-mb')
    }
  } else if ([2, 5, 8].includes(index)) {
    classStacks.push('no-mr')
  } else if ([5, 6].includes($props.productList.length) && [3, 4, 5].includes(index)) {
    classStacks.push('no-mb')
  } else if ([6, 7, 8].includes(index)) {
    classStacks.push('no-mb')
  }
  return classStacks
})

const computedStyle = computed(() => {
  if ($props.productList.length === 1) {
    return { width: '554rpx', height: '554rpx', borderRadius: '8rpx' }
  } else if ([2, 4].includes($props.productList.length)) {
    return { width: '268rpx', height: '268rpx', borderRadius: '8rpx' }
  } else if ($props.productList.length === 3) {
    return {}
  } else {
    return { width: '172rpx', height: '172rpx', borderRadius: '8rpx' }
  }
})
</script>

<style lang="scss" scoped>
@include b(three-images) {
  @include flex(space-between);
  @include e(big) {
    width: 364rpx;
    height: 366rpx;
    border-radius: 8rpx;
    flex-shrink: 0;
  }
  @include e(small) {
    width: 176rpx;
    height: 366rpx;
    @include flex(space-between);
    flex-direction: column;
    margin-left: 14rpx;
    @include m(img) {
      width: 176rpx;
      height: 176rpx;
      border-radius: 8rpx;
    }
  }
}
@include b(margin) {
  margin-right: 14rpx;
  margin-bottom: 14rpx;
}
@include b(no-mr) {
  margin-right: 0;
}
@include b(no-mb) {
  margin-bottom: 0;
}
</style>
